<template>
  <v-snackbar
    v-model="internalValue"
    class="v-snackbar--material"
    v-bind="{
      ...$attrs,
      'color': 'transparent'
    }"
  >
    <material-alert
      v-model="internalValue"
      :color="$attrs.color"
      :dismissible="dismissible"
      :type="types"
      class="ma-0"
      dark
    >
      <slot />
    </material-alert>
  </v-snackbar>
</template>
<script>
  export default {
    name: 'MaterialSnackbar',

    props: {
      dismissible: {
        type: Boolean,
        default: true,
      },
      type: {
        type: String,
        default: '',
      },
      value: Boolean,
    },

    data () {
      return {
        internalValue: this.value,
        types: this.type,
      }
    },

    created() {
      console.log(66666)
    },

    watch: {
      internalValue (val, oldVal) {
        if (val === oldVal) return

        this.$emit('input', val)
      },
      type (val) {
        this.types = val
      },
      value (val, oldVal) {
        if (val === oldVal) return

        this.internalValue = val
      },
    },
  }
</script>

<style lang="scss">
  .v-snackbar--material {
    // margin-top: 32px;
    // margin-bottom: 32px;

    .v-alert--material,
    .v-snack__wrapper {
      border-radius: 4px;
      box-shadow: none !important;
    }

    .v-snack__content {
      overflow: visible;
      padding: 0;
    }
  }
    
</style>
